<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import { getMonthlyIndexCount } from '@/api/policyManage'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    yName: {
      type: String,
      required: true
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    name_contrast: {
      type: String,
      default: ''
    },
    month_contrast: {
      type: Number
    }
  },
  data() {
    return {
      chart: null,
      listLoading: false,
      data_obj: {},
      data1: []
    }
  },
  watch: {
    data: {
      handler(newValue) {
        this.data = newValue
        this.data1 = this.data
        this.data_obj[this.yName] = this.data1
        // this.$nextTick(() => {
        //   this.initChart(this.data_obj)
        // })
      },
      deep: true,
      immediate: true
    },
    month_contrast: {
      handler(val) {
        if(val) {
          this.getMonthlyIndexCount(val) // 获取对比数据
        }
      },
      immediate: true
    },
  },
  created() {

  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(obj) {
      this.chart = echarts.init(document.getElementById(this.id))

      const color_list = ['#e16756', '#81b7ec'] //todo 颜色
      const series = []
      Object.keys(obj).forEach(key => {
        const item = obj[key].map(e => Number(e).toFixed(2))
        series.push({
          name: key,
          type: 'bar',
          barWidth: '20%',
          symbolSize: 2,
          symbol: 'emptyCircle',
          showSymbol: false,
          lineStyle: {
            width: 1.5
          },
          itemStyle: {
            normal: {
              color: color_list[series.length],
              barBorderRadius: 0
            }
          },
          data: item
        })
      })

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(150,150,150,0.3)'
            }
          },
          formatter(params) {
            let str = ''
            str += `<div style="padding-bottom: 2px;">${params[0].name}</div>`
            for (let i = 0; i < params.length; i += 1) {
              str += `<div style="display: flex;align-items: center;">
                    ${params[i].marker} 
                    <span style="flex:1;">${params[i].seriesName}</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params[i].data}%</span>
                    </div>`
            }
            return str
          }
        },
        grid: {
          left: '8%',
          right: '5%',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '12%',
          top: '4%',
          textStyle: {
            color: '#90979c'
          },
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 'auto'
          },
          data: ['<-15%', '-15~-10%', '-10~-5%', '-5~0%', '0~5%', '5~10%', '10~15%', '>15%']
        }],
        yAxis: [{
          type: 'value',
          min: 'dataMin',
          max: 'dataMax',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#90979c'
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            formatter: function(value) {
              return value + '%'
            }
          },
          splitArea: {
            show: false
          }
        }],
        series
      })
    },
    getMonthlyIndexCount(indexType) {
      getMonthlyIndexCount({
        indexType
      }).then(res => {
        const _data2 = res.body
        this.data_obj = {}
        this.data_obj[this.yName] = this.data1
        this.data_obj[this.name_contrast] = _data2.map(item => item.toFixed(2))
        // this.chart.dispose()
        this.initChart(this.data_obj)
      })
    }
  }
}
</script>
